<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #test{width: 100px;height: 100px;}
        .test{background-color: gray;}
        .active{background-color: red;}
    </style>
</head>
<body>
    <div v-bind:class="{active:isActive}"></div>
    <!-- 上面语法表示active这个class存在与否将取决于数据属性isActive的truthiness。 -->
    <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>
    <!-- 结果渲染为:<div class="static active"></div> -->
    <div id="app">
        <div id="test" class="test" v-bind:class="{active:isActive}">
            <h1>{{message}}</h1>
        </div>
    </div>

    <div id="app2">
        <div id="test" class="test" v-bind:class="generalClsObj">
            <h1>{{generalClsObj.message}}</h1>
        </div>
    </div>

    <div id="app3" v-bind:class="classObject"></div>

    <!-- 数组语法 -->
    <div id="app4" v-bind:class="[activeClass,errorClass]"></div>
    
    <!-- 内联样式 -->
    <div id="app5" v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">Vue.js</div>

    <!-- 用在组件上 -->
    <my-component class="baz boo"></my-component>

    <!-- 对象语法 -->
    <div v-bind:style="styleObject" id="app6">WangXiao</div>
</body>
<script src="./vue.js"></script>
<script src="main.js"></script>
</html>